<div>
  <h4>A simple chat system</h4>

  <form ng-show="!user">
    <input ng-model="userInput" placeholder="enter a username" type="text"/>
    <button id="sendUser" ng-disabled="!userInput" ng-click="sendUser()">Ok</button>
  </form>

  <div id="chat-box" ng-show="user">
    <div ng-repeat="msg in messages track by $index">{{msg}}</div>
  </div>
  <form ng-show="user">
    <input ng-model="message" placeholder="Enter a message" type="text"/>
    <button id="sendMessage" ng-disabled="!message" ng-click="sendMessage()">Send</button>
    <button id="clearMessages" ng-click="clearMessages()">Clear all messages</button>
  </form>
</div>
